<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>flex主轴方向flex-direction</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .block-or-flex{
        width: 100%;
        height: 200px;
        background-color: #eee;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        /* 控制子元素垂直方向的对齐方式：自动伸缩填充 */
        align-items: stretch;
    }
    .item {
        background-color: red;
        color: #fff;
        padding: 5px 10px;
    }
    .item3 {
        font-weight: bold;
    }
</style>
</head>

<body>
    <div class="block-or-flex">
        <div class="item">你好，</div>
        <div class="item">欢迎来到</div>
        <div class="item item3">flex 世界</div>
    </div>
    <div>
        <label for="row">
            row
            <input type="radio" name="display" checked id="row" value="row" />
        </label>
        <label for="column">
            column
            <input type="radio" name="display" id="column" value="column" />
        </label>
    </div>

<script>
    const blockOrFlex = document.querySelector('.block-or-flex');
    const radio = document.querySelectorAll('input[name="display"]');
    radio.forEach(item => {
        item.addEventListener('change', function () {
            blockOrFlex.style.flexDirection = this.value;
        })
    })
</script>
</body>
</html>